<template>
  <a-spin :spinning="isTableLoading">
    <div class="modal-header">
      <div class="modal-title">{{ l('SelectUser') }}</div>
    </div>
    <div class="modal-body">
      <a-input-search
        :placeholder="l('SearchWithThreeDot')"
        v-model:value="filterText"
        @search="refresh"
        :enterButton="l('Search')"
        size="large"
      />
      <a-table
        size="middle"
        :scroll="{ x: tableWidthScroll }"
        :rowKey="(tableData) => tableData.value"
        :columns="columns"
        :data-source="dataList"
        :pagination="{
          total: totalItems,
          current: pageNumber,
          pageSize: pageSize,
          showTotal: showTotalInfo,
          showQuickJumper: true,
          showSizeChanger: true,
          change: pageNumberChange,
          showSizeChange: pageNumberChange,
          pageSizeOptions: pageSizeOptions,
          size: 'middle',
        }"
        @change="tableChange"
      >
        <!-- tbody插槽 -->
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'select'">
            <a-button type="primary" @click="selectItem(record)">
              <select-outlined />{{ l('Select') }}</a-button
            >
          </template>
        </template>
      </a-table>
    </div>
    <div class="modal-footer">
      <a-button :disabled="saving" @click="close()" type="button">
        {{ l('Cancel') }}
      </a-button>
    </div>
  </a-spin>
</template>

<script lang="ts">
  import { ModalPagedListingComponentBase, IPagedRequestDto } from '/@/shared/component-base';
  import {
    CommonLookupFindUsersInput,
    CommonLookupServiceProxy,
    UserListDto,
  } from '/@/shared/service-proxies';
  import { defineComponent } from 'vue';
  import { SelectOutlined } from '@ant-design/icons-vue';
  import { ColumnType } from 'ant-design-vue/lib/table';

  export default defineComponent({
    name: 'CommonLookup',
    components: {
      SelectOutlined,
    },
    mixins: [ModalPagedListingComponentBase],
    props: {
      tenantId: {
        type: String, // 实际传过来的类型
      },
    },
    data() {
      return {
        // 输入框
        filterText: '',
        commonLookupServiceProxy: new CommonLookupServiceProxy(),
        com: new CommonLookupFindUsersInput(),
        dataList: [] as UserListDto[],
      };
    },
    methods: {
      // 获取列
      getColumns(): ColumnType<UserListDto>[] {
        return [
          {
            title: 'No',
            customRender: ({ index }) => {
              const a = (this.pageNumber - 1) * this.pageSize + (index + 1);
              return a;
            },
            width: 60,
            fixed: 'left',
          },
          {
            title: this.l('Select'),
            dataIndex: 'select',
            key: 'select',
            width: 150,
            ellipsis: true,
          },
          {
            title: this.l('Name'),
            dataIndex: 'name',
            key: 'name',
            ellipsis: true,
          },
        ];
      },
      /**
       * 获取数据
       */
      fetchDataList(request: IPagedRequestDto, finishedCallback?: () => void) {
        this.com.tenantId = this.tenantId as any;
        this.com.maxResultCount = request.maxResultCount;
        this.com.skipCount = request.skipCount;
        this.com.filterText = this.filterText;

        this.commonLookupServiceProxy
          .findUsers(this.com)
          .finally(() => {
            finishedCallback!();
          })
          .then((res) => {
            this.showPaging(res);
          });
      },
      /**
       * 选择
       */
      selectItem(item) {
        this.success(item);
      },
    },
  });
</script>
